<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript">
  window.onload = function () {
   				
				/*
				 * 点击按钮以后弹出一个内容
				 */
				//获取按钮对象
				var btn01 = document.getElementById("btn01");
				
				/*
				 * 使用 对象.事件 = 函数 的形式绑定响应函数，
				 * 	它只能同时为一个元素的一个事件绑定一个响应函数，
				 * 	不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
				 */
				
				//为btn01绑定一个单击响应函数
				/*btn01.onclick = function(){
					alert(1);
				};*/
				
				//为btn01绑定第二个响应函数
				/*btn01.onclick = function(){
					alert(2);
				};*/
         				/*
				 * addEventListener()
				 * 	- 通过这个方法也可以为元素绑定响应函数
				 *  - 参数：
				 * 		1.事件的字符串，不要on
				 * 		2.回调函数，当事件触发时该函数会被调用
				 * 		3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
				 * 
				 * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
				 * 	这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
				 * 
				 * 这个方法不支持IE8及以下的浏览器
				 */
        //  btn01.addEventListener('click',function(){
        //    alert(1)
        //  },false)
        //  btn01.addEventListener('click',function() {
        //    alert(2)
        //  },false)
      	/*
				 * attachEvent()
				 * 	- 在IE8中可以使用attachEvent()来绑定事件
				 *  - 参数：
				 * 		1.事件的字符串，要on
				 * 		2.回调函数
				 * 
				 *  - 这个方法也可以同时为一个事件绑定多个处理函数，
				 * 		不同的是它是后绑定先执行，执行顺序和addEventListener()相反
				 */
        //  btn01.attachEvent('onclick',function() {
        //    alert(3)
        //  })
        //  btn01.attachEvent('onclick',function() {
        //    alert(4)
        //  })

       /*btn01.addEventListener("click",function(){
					alert(this);
				},false);*/
				
				/*btn01.attachEvent("onclick",function(){
					alert(this);
				});*/
				
				// bind(btn01 , "click" , function(){
				// 	alert(this);
				// });

        bind(btn01,'click',function() {
          // alert(this)
          alert(this)
        })
    
  };
      //定义一个函数，用来为指定元素绑定响应函数
			/*
			 * addEventListener()中的this，是绑定事件的对象
			 * attachEvent()中的this，是window
			 *  需要统一两个方法this
			 */
			/*
			 * 参数：
			 * 	obj 要绑定事件的对象
			 * 	eventStr 事件的字符串(不要on)
			 *  callback 回调函数
			 */
       function bind(obj,eventStr,callback) {
         // 大部分浏览器兼容的方式
         if (obj.addEventListener) {
          // * this是谁由调用方式决定(谁调用的打印谁，这里应该是button)
           obj.addEventListener(eventStr,callback,false)
         } else {
          /*
					 * this是谁由调用方式决定(这里的打印出来的this是window)
					 * callback.call(obj)
					 */
           // IE8及以下
          //  obj.attachEvent('on'+eventStr,callback)
           obj.attachEvent('on'+eventStr,function() {
             // 在匿名函数中调用回调函数，此后this就不再是window
             callback(obj)
           })
         }
       }

  </script>
</head>
<body>
  <button id="btn01">点我一下</button>

</body>
</html>